<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>风险管理和隐患排查治理工具箱</title>
    <script src="./layui/layui.js"></script>
    <script src="./jquery-3.6.0.min.js"></script>
    <script src="./common.js"></script>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="./css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <header class="index_header">
        <ul>
            <li>
                <img src="./images/logo.png" alt="logo">
                <h3>风险管理和隐患排查治理工具箱</h3>
            </li>
            <li>
                <b>Version: 1.0.0</b>
            </li>
        </ul>
    </header>
    <div class="index_nav">
        <a class="back_btn" href="javascript:;" onclick="backPage()">
            <i class="fa fa-arrow-circle-left" style="font-size: 2rem;margin-top: .5rem;color: #4bd0d0;"></i>
        </a>
        <a class="back_btn" href="javascript:;" onclick="location.reload()">
            <i class="fa fa-refresh" style="font-size: 2rem;margin-top: .5rem;color: #4bd0d0;"></i>
        </a>
    </div>
    <div class="analysis_menu">
        <div class="layui-bg-gray" style="padding: .5rem 30px">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                    <div class="layui-panel">
                        <div class="layui-card-header" style="font-size: 1.2rem;">工具简介</div>
                        <div style="padding: 1rem;">
                            <div class="layui-collapse" lay-accordion="">
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">工作安全分析法 JSA</h2>
                                    <div class="layui-colla-content">
                                        <p>工作安全分析法（Job Safety Analysis，简称JSA）：<br>通过对工作进行分解，对分解后的每一个工作步骤和步骤间的连贯性进行危险源识别，完成工作流程执行前的风险管理。
                                        适用性：在某个单一系统内，或在某个阶段内，对固定的工作流程进行风险管理的过程。
                                        <br>主要步骤：组建JSA小组，将工作流程进行分解，对分解的步骤进行危险源识别，风险分析和评价，风险控制。</p>
                                    </div>
                                </div>
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">任务周期分析 JCC</h2>
                                    <div class="layui-colla-content">
                                        <p>任务周期分析（Job Cycle Analysis，简称JCC）：<br>周期性对重要或关键的工作流程通过访谈和现场观察识别工作流程中存在的危险源和隐患。
                                        适用性：较适合单一系统内部流程或简单的关键工作流程风险管理或隐患排查治理。
                                        <br>主要步骤：识别关键流程、初始评估、现场观察评估、最终评估。</p>
                                    </div>
                                </div>
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">管理变更 MOC</h2>
                                    <div class="layui-colla-content">
                                        <p>管理变更（Management Of Change，简称MOC）：<br>通过对变更项目的规模、实施难度、风险进行评估和分级，对不同级别的变更规模实施不同级别的安全保证措施。
                                        适用性：适用于重要变更，涉及部门、机构较多变更项目的风险管理。
                                        <br>主要步骤：变更规模评估、变更项目风险管理、变更分级、安全保证分级措施。</p>
                                    </div>
                                </div>
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">启动前安全检查 PSSR</h2>
                                    <div class="layui-colla-content">
                                        <p>启动前安全检查（Pre-Startup Safety Review,简称PSSR）：<br>主要特点：在新设备、系统的启用前，通过对系统进行全面整体分析，从各岗位工作输入、过程和输出关注点引导开展风险管理或隐患排查治理。
                                        适用性： 较为适用于涉及多个部门或系统的新设备、系统投入使用前的风险管理和隐患排查治理。
                                        <br>主要步骤：组建PSSR小组，编制模块现场检查单和召开PSSR审议会议。</p>
                                    </div>
                                </div>
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">设计变更 COD</h2>
                                    <div class="layui-colla-content">
                                        <p>设计变更（Change Of Design,简称COD）：<br>是在任务执行前对任务实施方案的修改、优化过程以及任务执行中对任务涉及的设备、系统等物的替换过程进行定性风险分析的方法。
                                        适用性：适用于对单一系统内工作任务实施方案及方案中物的替换开展风险管理。
                                        <br>主要步骤：成立COD专家组，评点法评级和部门沟通。</p>
                                    </div>
                                </div>
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">设任务风险评估 TRA</h2>
                                    <div class="layui-colla-content">
                                        <p>设任务风险评估（Task Risk Assessment,简称TRA）：<br>对于跨系统高风险工作任务，通过细分工作步骤，收集专家经验和衍生风险三个方面进行风险识别的方法。
                                        适用性：跨系统高风险工作任务风险管理。
                                        <br>主要步骤：组建TRA小组，任务步骤划分，专家经验和残余风险评估，风险沟通和执行监控。</p>
                                    </div>
                                </div>
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">事故树分析 FTA</h2>
                                    <div class="layui-colla-content">
                                        <p>事故树分析（Fault Tree Analysis,简称FTA）：<br>通过对顶上事件的发生原因，按照人机环管等分类方法进行逐级向下分解，深入挖掘找到导致事件发生的根原因组合，实施针对性管控措施，降低事件发生概率。
                                        适用性：系统设计、风险管理、隐患排查治理和事件调查处理等。
                                        <br>主要步骤：收集事件信息，确定顶上事件；记录过程要素；绘制事故树，确定基本事件；定量定性分析，执行管控措施；根原因归类统计分析。</p>
                                    </div>
                                </div>
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">设计变更 FISH</h2>
                                    <div class="layui-colla-content">
                                        <p>因果分析法（又名鱼骨分析法，Fishbone analysis method）：<br>通过选取合适的分析模型，开展头脑风暴，系统、全面查找危险源或问题致因，对讨论的结果进行整理，通过简单的定量分析，进而识别较为关键的影响因素。快速的查找问题潜在的根本原因，辅以简单的定量分析法查找关键因素。
                                        适用性：系统设计、风险管理、隐患排查和事件调查处理等。
                                        <br>主要步骤：确定事件和问题，选取事件和问题分析类型、画出因果图、将因果图转为层次结果模型图、利用权重值构造判断矩阵、计算各影响因素权重、确定影响事件发生的关键因素。</p>
                                    </div>
                                </div>
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">安全检查表法 SCA</h2>
                                    <div class="layui-colla-content">
                                        <p>安全检查表法（Safety Checklist Analysis，简称SCA）：<br>在传统检查单的基础上进一步制定了系统化、模块化的安全检查表，通过定性分析的方法对检查内容进行合规性评估并提出改进建议，对发现的隐患进行分级并采取相应管控措施。
                                        适用性：该方法广泛适用于隐患排查治理工作。
                                        <br>主要步骤：收集评价对象的有关数据资料、编制安全检查表、现场检查评价、编写评价结果分析、整改落实五个部分。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-bg-gray" style="padding: .5rem 30px">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                    <div class="layui-panel">
                        <div class="layui-card-header" style="font-size: 1.2rem;">智能选择工具</div>
                        <div style="padding: 1rem;">
                            <form class="layui-form" action="">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">类型选择: </label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="type" value="true" title="风险管理" checked="">
                                        <input type="radio" name="type" value="false" title="隐患排查/事件调查">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">部门选择: </label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="branch" value="true" title="单一系统/部门" checked="">
                                        <input type="radio" name="branch" value="false" title="跨部门/多系统">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label"></label>
                                    <div class="layui-input-block">
                                        <a href="javascript:;" class="layui-btn" onclick="sub()">下一步</a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>


<script>
const { ipcRenderer } = require('electron')

var fn = true;
//监听main process里发出的message
ipcRenderer.on('downstate', (event, arg) => {
    console.log("下载状态：" + arg);
    if (arg == 'start') {
        if (fn) {
            loading()
            fn = false
        }
    }else if (arg == 'completed') {
        layer.close(loadingBox)
        fn = true
        alert('文件下载完成!')
    }else if (arg == 'cancel') {
        fn = true
        layer.close(loadingBox)
    }else{
        fn = true
        layer.close(loadingBox)
        alert('桌面已存在该文件,无法覆盖!')
    }
})

function backPage() {
    ipcRenderer.send("backPage", 'index');
}

function downloadExcel(tabelName) {
    ipcRenderer.send("downloadExcel", tabelName);
}

function sub() {
    // 分析结果弹出层
    var type = $("input[name=type]:checked").val();
    var branch = $("input[name=branch]:checked").val();
    console.log(type)
    console.log(branch)
    if (type == 'true') {
        if (branch == 'true') {
            var html = '<div class="table_list" style="margin-top: 2rem;">\
                <ul>\
                    <a href="javascript:;" onclick=downloadExcel("JSA")><li>\
                        <div style="background: #C40000;">JSA</div>\
                        <p>工作安全分析</p>\
                    </li></a>\
                    <a href="javascript:;" onclick=downloadExcel("COD")><li>\
                        <div style="background: #76C400;">COD</div>\
                        <p>设计变更</p>\
                    </li></a>\
                    <a href="javascript:;" onclick=downloadExcel("FISH")><li>\
                        <div style="background: #005EC4;">FISH</div>\
                        <p>因果分析法</p>\
                    </li></a>\
                    <a href="javascript:;" onclick=downloadExcel("JCC")><li>\
                        <div style="background: #F39400;">JCC</div>\
                        <p>任务周期性评估</p>\
                    </li></a>\
                </ul>\
            <div>'
        }else{
            var html = '<div class="table_list" style="margin-top: 2rem;">\
                <ul>\
                    <a href="javascript:;" onclick=downloadExcel("MOC")><li>\
                        <div style="background: #CFDF00;">MOC</div>\
                        <p>变更管理</p>\
                    <a href="javascript:;" onclick=downloadExcel("TRA")><li>\
                        <div style="background: #009EC4;">TRA</div>\
                        <p>任务风险评估</p>\
                    </li></a>\
                    <a href="javascript:;" onclick=downloadExcel("PSSR")><li>\
                        <div style="background: #00C46C;">PSSR</div>\
                        <p>启动前安全评估</p>\
                    </li></a>\
                </ul>\
            <div>'
        }
    }else{
        if (branch == 'true') {
            var html = '<div class="table_list" style="margin-top: 2rem;">\
                <ul>\
                    <a href="javascript:;" onclick=downloadExcel("JCC")><li>\
                        <div style="background: #F39400;">JCC</div>\
                        <p>任务周期性评估</p>\
                    </li></a>\
                    <a href="javascript:;" onclick=downloadExcel("SCA")><li>\
                        <div style="background: #C40073;">SCA</div>\
                        <p>安全检查表</p>\
                    </li></a>\
                    <a href="javascript:;" onclick=downloadExcel("FISH")><li>\
                        <div style="background: #005EC4;">FISH</div>\
                        <p>因果分析法</p>\
                    </li></a>\
                    <a href="javascript:;" onclick=downloadExcel("FTA")><li>\
                        <div style="background: #9F00C4;">FTA</div>\
                        <p>事故树分析法</p>\
                    </li></a>\
                </ul>\
            <div>'
        }else{
            var html = '<div class="table_list" style="margin-top: 2rem;">\
                <ul>\
                    <a href="javascript:;" onclick=downloadExcel("PSSR")><li>\
                        <div style="background: #00C46C;">PSSR</div>\
                        <p>启动前安全评估</p>\
                    </li></a>\
                    <a href="javascript:;" onclick=downloadExcel("FTA")><li>\
                        <div style="background: #9F00C4;">FTA</div>\
                        <p>事故树分析法</p>\
                    </li></a>\
                    <a href="javascript:;" onclick=downloadExcel("SCA")><li>\
                        <div style="background: #C40073;">SCA</div>\
                        <p>安全检查表</p>\
                    </li></a>\
                </ul>\
            <div>'
        }
    }

    layer.open({
        type: 1,
        skin: 'layui-layer-tools', //样式类名
        title: '选择工具',
        closeBtn: 0, //不显示关闭按钮
        anim: 2,
        shadeClose: true, //开启遮罩关闭
        area: ['100%', '400px'],
        content: html
    });
}
</script>